<?php if(!defined('access') or !access) die('This file cannot be directly accessed.'); ?>
<script>
	
	// Loader js
    var divLoading = document.createElement("div");
    divLoading.id = "image-viewer-loading";
    divLoading.className = "soft-hidden";
    document.getElementById("image-viewer").appendChild(divLoading)
	
	// Topbar native js thing
	document.getElementById("top-bar").className += ' transparent'; 
	
	// Fix the image-viewer height (or width) asap with native js
	image_viewer_full_fix = function() {

		var viewer = document.getElementById("image-viewer"),
			viewer_container = document.getElementById("image-viewer-container"),
			top = document.getElementById("top-bar"),
			imgSource = {
				width: <?php echo get_image()["width"]; ?>,
				height: <?php echo get_image()["height"]; ?>
			},
			img = {width: imgSource.width, height: imgSource.height},
			ratio = imgSource.width/imgSource.height;
		
		//viewer_container.className = viewer_container.className.replace(/\bcursor-zoom-(in|out)\b/, "");

		var canvas = {
				height: window.innerHeight - (typeof top !== "undefined" ? top.clientHeight : 0),
				width: viewer.clientWidth
			};
		
		var viewer_banner_top = <?php echo CHV\getSetting('banner_image_image-viewer_top') ? 1 : 0; ?>,
			viewer_banner_foot = <?php echo CHV\getSetting('banner_image_image-viewer_foot') ? 1 : 0; ?>;
		
		var viewer_banner_height = 90;
		
		if(viewer_banner_top) {
			canvas.height -= viewer_banner_height + 20;
		}
		if(viewer_banner_foot) {
			canvas.height -= viewer_banner_height + 20;
		}
		
		var hasClass = function(element, cls) {
			return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
		}
		
		if(hasClass(document.documentElement, "phone") || hasClass(document.documentElement, "phablet")) {
			if(img.width > canvas.width) {
				img.width = canvas.width;
			}
			img.height = (img.width/ratio);
		} else {
			if(img.height > canvas.height && (img.height/img.width) < 3) {
				img.height = canvas.height;
			}
			if(img.height == canvas.height) {
				img.width = (img.height * ratio);	
			}
		}
		
		if(img.width > canvas.width) {
			img.width = canvas.width;
			img.height = (img.width/ratio);
		} else if((img.height/img.width) > 3) { // wow, very tall. such heights
			img = imgSource;
			if(img.width > canvas.width) {
				img.width = canvas.width * 0.8;
			}
			img.height = (img.width/ratio);
		}
		
		if(imgSource.width > img.width && img.width <= canvas.width) {
			if(img.width == canvas.width) {
				viewer_container.className = viewer_container.className.replace(/\bcursor-zoom-(in|out)\b/, "");
			} else {
				if(!hasClass(viewer_container, "jscursor-zoom-in")) {
					viewer_container.className += " jscursor-zoom-in";
				} else {
					viewer_container.className = viewer_container.className.replace(/jscursor-zoom-in/, "");
					viewer_container.className += " cursor-zoom-in";
				}
				
			}
		}
		
		img = {
			width: img.width + "px",
			height: img.height + "px",
			display: "block"
		}
		
		for(var k in img) {
			viewer_container.style[k] = img[k];
		}
	}
	
	image_viewer_full_fix();
	
	// Bind the native fn to the CHV object
	$(document).ready(function() {
		
		CHV.obj.image_viewer.image = {
			width: <?php echo get_image()["width"]; ?>,
			height: <?php echo get_image()["height"]; ?>,
			ratio: <?php echo number_format(get_image()['ratio'], 6, '.', ''); ?>,
			url: "<?php echo get_image()["url"]; ?>",
			medium: {
				url: "<?php echo get_image()["medium"]["url"]; ?>"
			},
			url_viewer: "<?php echo get_image()["url_viewer"]; ?>"
		};
		CHV.obj.image_viewer.album = {
			id_encoded: "<?php echo get_image()["album"]["id_encoded"]; ?>"
		};	
		
		image_viewer_full_fix();
		
		CHV.fn.image_viewer_full_fix = window["image_viewer_full_fix"];
		
	});
</script>